<!--公共导航栏组件-->
<template>
  <div>
    <el-header class="header" height="70px">
      <div class="left">
        <slot name="left"></slot>
      </div>

      <slot name="middle">
        <div class="middle">
          <ul
            v-if="menus.length !== 0"
            id="ul"
            :style="{width: navWidth === '' ? '100%' : navWidth}"
            style="margin: 0 auto"
          >
            <li v-for="(item,index) in menus" @click="handleSelect(item, index)" :key="index" :index="index.toString()">
              <span class="item" :class="{active: index === $route.meta.index}" :style="{color: index === $route.meta.index ? activeTextColor : ''}">{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </slot>

      <div class="right">
        <slot name="right"></slot>
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
  name: "PublicHeader",
  props: {
    menus: {
      type: Array,
      default: () => {
        return []
      }
    },
    activeTextColor: {
      type: String,
      default: "black"
    },
    textColor: {
      type: String,
      default: "white"
    },
    navWidth: {
      type: String
    }
  },
  data() {
    return {
      activeIndex: '0',
    }
  },
  methods: {
    handleSelect(item, index) {
      this.activeIndex = index + ""
      if (this.$route.path != item.route) {
        let route = this.$router;
        route.push({path: item.route});
      }
    },
  },
  created() {

  }
}
</script>

<style scoped>
.active {
  border-bottom: 3px solid #4285F4;
  z-index: 1;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .left {
  flex: 2;
  width: 128px;
  padding: 17px 0;
}


.header .middle {
  flex: 6;
  height: 100%;
}

.header .middle ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

.header li {
  height: 100%;
  width: 100%;
  margin-right: 5px;
  cursor: pointer;
}

.header li span {
  display: block;
  width: 100%;
  height: 96%;
  line-height: 4;
  font-size: 18px;
  font-weight: 500;
  color: #3c4043;
}

.header .right {
  flex: 2;
}
</style>
